<template>
	<div class="container py-10 px-16">
		<div class="mb-4 py-4 p-4 bg-light-200">
			<a-form
				ref="formRef"
				name="advanced_search"
				class="ant-advanced-search-form"
				:model="formState"
				@finish="onSearch"
			>
				<a-row :gutter="24">
					<a-col :span="8">
						<a-form-item
							name="arrivalTime"
							label="Excepted Arrival Time"
							:rules="[{ required: true }]"
						>
							<a-date-picker
								v-model:value="formState.arrivalTime"
								placeholder="placeholder"
							></a-date-picker>
						</a-form-item>
					</a-col>

					<a-col :span="8">
						<a-form-item name="status" label="Status" :rules="[{ required: true }]">
							<status-select v-model:value="formState.status"></status-select>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row>
					<a-col :span="24" style="text-align: right">
						<a-button type="primary" html-type="submit">Search</a-button>
						<a-button type="primary" class="ml-2" @click="onAdd" v-if="hasAuthorith(Role.Guest)">
							<template #icon>
								<PlusOutlined />
							</template>
							Add
						</a-button>
						<a-button class="ml-2" @click="refresh">
							<template #icon>
								<ReloadOutlined />
							</template>
							Refresh
						</a-button>
					</a-col>
				</a-row>
			</a-form>
		</div>
		<ReservationList
			:datasource="data"
			:loading="loading"
			@update="onUpdate"
			@remove="onRemove"
			@detail="onDetail"
		></ReservationList>
	</div>
</template>

<script setup lang="ts">
import { cancel, query, update } from '@/apis/reservation';
import { dateFormat } from '@/types/meta';
import { ReservationStatus, SearchReservation, UpdateReservationForm } from '@/types/reservation';
import { Role } from '@/types/role';
import useAutority from '@/utils/hooks/auth';
import { FormInstance, message } from 'ant-design-vue';
import * as dayjs from 'dayjs';
import { useRequest } from 'vue-hooks-plus';
// State Define
const formState = reactive<SearchReservation>({
	arrivalTime: dayjs(),
	status: ReservationStatus.Created,
});
const formRef = ref<FormInstance>();
const router = useRouter();
const { hasAuthorith } = useAutority();

// Action
const { data, refresh, run, loading } = useRequest(
	(date: string, status: ReservationStatus) => query(date, status),
	{
		manual: true,
	},
);

const onSearch = (value: SearchReservation) => {
	run(dayjs(value.arrivalTime).format(dateFormat), value.status);
};

const onAdd = () => {
	router.push({ path: '/app/restful/create' });
};

const onUpdate = (reservation: UpdateReservationForm, id: string) => {
	update(reservation, id)
		.then(() => {
			message.success('Update Successfully!');
		})
		.catch((err) => {
			console.log(err);
		});
};

const onRemove = (id: string) => {
	cancel(id)
		.then(() => {
			message.success('Canceled Successfully!');
		})
		.catch((err) => {
			console.log(err);
		});
};
const onDetail = (id: string) => {
	router.push({
		name: 'restful-detail',
		params: {
			id,
		},
	});
};

// Life
onMounted(() => {
	run(dayjs().format(dateFormat), ReservationStatus.Created);
});
</script>

<style scoped></style>
